<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- submit是button的默认值 -->
		<button type="button" onclick="add()">添加</button>
		<table border="1" id="mytable">
			<thead>
				<tr>
					<th>序号</th>
					<th>书名</th>
					<th>日期</th>
					<th>单价</th>
					<th>数量</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		总价格:<span id="span_result"></span>
		<script type="text/javascript">
			let books = [
				{id: 1, name: 'Java从入门到放弃', price: 80, tdate: '2020-07-01', count: 1},
				{id: 2, name: 'Vue从入门到放弃', price: 90, tdate: '2020-07-02', count: 1},
				{id: 3, name: 'Mysql从入门到放弃', price: 100.01, tdate: '2020-07-03', count: 1},
				{id: 4, name: '啥都从入门到放弃', price: 70.00, tdate: '2020-07-04', count: 1},
			]
			
			//将数组保存到sessionStorage中
			let data = sessionStorage.getItem("data");
			// console.log(data);
			if(data) {
				books = JSON.parse(data);
			}else {
				sessionStorage.setItem("data", JSON.stringify(books));
			}
			
			//获取table对象
			let table = document.getElementsByTagName("table")[0];
			let tbody = table.getElementsByTagName("tbody")[0];
			
			//将数组中的值显示在表格中
			function update() {
				for(let index in books) {
					// console.log(index);
					let item = books[index];
					// console.log(typeof(item));
					let tr = document.createElement("tr");
					tbody.appendChild(tr);
					
					for(let val in item) {
						// console.log(val);
						// console.log(item[val]);
						let text = item[val];
						let isHtml = false;
						if (val === "name") {
							text = `
								<a href='#' onclick='edit(${index})'>${text}</a>
							`;
							isHtml = true;
						}else if(val === 'count') {
							text = `
								<button type="button" onclick="jian(${index})">-</button>
								<span>${text}</span>
								<button type="button" onclick="jia(${index})">+</button>
							`;
							isHtml = true;
						}
						appendTd(tr, text, isHtml);
					}
					let opt = `
						<button onclick='edit(${index})'>编辑</button>
						<button onclick="del(${index})">删除</button>
					`;
					appendTd(tr, opt, true);
				}
			}
			
			function appendTd(tr, value, isHtml) {
				let td = document.createElement("td"); 
				if(isHtml) {
					td.innerHTML = value;
				}else {
					td.innerText = value;
				}
				tr.appendChild(td);
			}
			function add() {
				location.href = "add.html";
				sessionStorage.setItem("item", null);
			}
			function edit(index) {
				let item = books[index];
				sessionStorage.setItem("index", index);
				sessionStorage.setItem("item", JSON.stringify(item));
				location.href = "add.html";
			}
			function jia(index) {
				let item = books[index];
				item.count++;
				let node = tbody.childNodes[index + 1];
				let span = node.getElementsByTagName("span")[0];
				console.log(span);
				span.innerText = item.count;
				console.log(books);
				getTotal();
			}
			function jian(index) {
				let item = books[index];
				if(item.count === 1) {
					return;
				}
				item.count--;
				let node = tbody.childNodes[index + 1];
				let span = node.getElementsByTagName("span")[0];
				console.log(span);
				span.innerText = item.count;
				getTotal();
			}
			function del(index) {
				//删除页面元素
				console.log(index);
				let node = tbody.childNodes[index + 1];
				console.log(node);
				tbody.removeChild(node);
				//删除数组中的数据
				books.splice(index, 1);
				console.log(books.toString());
			}
			
			function getTotal() {
				let total = 0;
				for(let item of books) {
					total += item.price * item.count;
				}
				
				document.getElementById("span_result").innerText = total;
			}
			
			update();
			getTotal();
		</script>
	</body>
</html>
